// 商品对象
class Goods {
	constructor() {
		this.goods = goods
		this.chooseNum = 0
	}
	// 增加商品
	increase() {
		this.chooseNum++
	}
	// 减少商品
	decrease() {
		if (this.chooseNum > 0) this.chooseNum--
	}
	// 计算当前商品总价
	getTotalPrice() {
		return this.chooseNum * this.goods.price
	}
}

// 页面数据对象
class UIData {
	constructor() {
		const goodsList = []
		goods.forEach(val => {
			const goods = new Goods(val)
			goodsList.push(goods)
		})
		this.goodsList = goodsList
		// 配送费
		this.freight = 5
		// 起送门槛
		this.freightThreshold = 30
	}
	// 增加？数量
	increase(index) {
		this.goodsList[index].increase()
	}
	// 减少？数量
	decrease(index) {
		this.goodsList[index].decrease()
	}
	// 总价
	getAllPrice() {
		let sumPrice = 0
		this.goodsList.forEach(val => {
			sumPrice += val.getTotalPrice()
		})
		return sumPrice.toFixed(2)
	}
	// 选中的商品总数量
	getAllChoosedNum() {
		let sumNum = 0
		this.goodsList.forEach(val => {
			sumNum += val.chooseNum
		})
		return sumNum
	}
	// 离起送门槛的金额
	getFreightThreshold() {
		return (this.freightThreshold - this.getAllPrice()).toFixed(0)
	}
	// 是否跨过起送门槛
	isOverThreshold() {
		return this.getFreightThreshold() < 0
	}
}


// ========================================================================界面逻辑
class UI {
	constructor() {
		this.uiData = new UIData()
		this.doms = {
			goodsList: document.querySelector(".goods-list"),
		}

		this.initPage()
	}
	// 初始化页面
	initPage() {
		let html = "";
		this.uiData.goodsList.forEach(val => {
			const goods = val.goods;
			console.log(goods);
			html += `
				<div class="goods-item">
				  <img src="${goods.pic}" alt="" class="goods-pic" />
				  <div class="goods-info">
				    <h2 class="goods-title">${goods.title}</h2>
				    <p class="goods-desc">${goods.desc}</p>
				    <p class="goods-sell">
				      <span>月售 ${goods.sellNumber}</span>
				      <span>好评率${goods.favorRate}%</span>
				    </p>
				    <div class="goods-confirm">
				      <p class="goods-price">
				        <span class="goods-price-unit">￥</span>
				        <span>${goods.price}</span>
				      </p>
				      <div class="goods-btns">
				        <i class="iconfont i-jianhao"></i>
				        <span>${val.chooseNum}</span>
				        <i class="iconfont i-jiajianzujianjiahao"></i>
				      </div>
				    </div>
				  </div>
				</div>`
			this.doms.goodsList.innerHTML = html
		})
	}
}

const ui = new UI()